
<template>
    <div id="qqq">
        <div id="qrCode" ref="qrCodeDiv"></div>
    </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import QRCode from 'qrcodejs2';

export default {
    name: "qrCode",
    props: {
        qrContent: String
    },
    setup(props) {
        const qrCodeDiv = ref(null);
        const bindQRCode = () => {
            new QRCode(qrCodeDiv.value, {
                text: props.qrContent,
                width: 230,
                height: 230,
                colorDark: "#333333", //二维码颜色
                colorLight: "#ffffff", //二维码背景色
                correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
            })
        }
        onMounted(function () {
            bindQRCode();
        })
        return {
            qrCodeDiv
        }
    }
}
</script>

<style>
#qqq {
    background-color: #969799;
    width: 300;
    height: 300;
    margin: 0 auto;
    /*水平居中*/
    position: relative;
}

#qrCode {
    display: inline-block;
    margin: 0 auto;
    /*水平居中*/
    position: relative;
    padding: 5px;
}
</style>